<template>
	<view class="page_body grey_bg">

		<mescroll-body ref="mescrollRef" top="1px" @init="mescrollInit" :up="upOptions" :down="upOptions" @up="upBack">

			<!-- 状态栏 -->
			<view class="status_bar"></view>

			<!-- 导航栏 -->
			<u-navbar title="" :autoBack="true" title=" ">
				<view slot="center" style="width: calc(100% - 50px);margin-left: 25px;">
					<u-search v-model="form.keyword" :clearabled="true" :showAction="true" actionText="取消"
							placeholder="搜索话题内帖子" @change="keyChange" @search="keyChange" @custom="goback()">
					</u-search>
				</view>
			</u-navbar>


			<view style="height: 44px;"></view>


			<!-- 数据列表 -->
			<view  v-if="dataList.length > 0">
				<view class="article_item" v-for="(item,index) in dataList">
					<!-- 发帖人信息 -->
					<view @click="gotoArticle(item.id)">
						<poster-info :data="item" :show-follow-btn="false" ></poster-info>
					</view>

					<!-- 内容 -->
					<view @click="gotoArticle(item.id)">
						<text-overflow :dt="item.content" :is-html="true" style="padding: 8px 0;"></text-overflow>
						<!-- 图片、视频 -->
						<file-list :dataList="item.fileList" @video_play="videoPlayBack"></file-list>
					</view>

					<!-- 话题 -->
					<view class="topic_box"   @click="gotoArticle(item.id)">
						<topic-name-btn :topic-info="item.topicInfo" ></topic-name-btn>
					</view>

					<!-- 底部的点赞、评论、分享 -->
					<footer-info :data="item"></footer-info>
				</view>
			</view>

			<no-data v-else-if="this.form.keyword" :height="wHeight" icon="/static/bg/cat_qz.png" :iconMarginTop="100">
			</no-data>

			<u-toast ref="uToast"></u-toast>


		</mescroll-body>


		<!-- 视频播放 -->
		<video-play ref="play"></video-play>


	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import SearchArticleList from './cpns/searchArticleList.vue'
	import VideoPlay from "@/components/file/videoPlay.vue";
	import TextOverflow from "@/components/textOverflow.vue";
	import PosterInfo from "@/components/article/posterInfo.vue";
	import FooterInfo from "@/components/article/footerInfo.vue";
	import FileList from "@/components/file/fileList.vue";
	import TopicNameBtn from "@/components/topic/topicNameBtn.vue";
	import NoData from "@/components/noTips/noData.vue"
	export default {
		components: {
			SearchArticleList,
			NoData,
			VideoPlay,
			TextOverflow,
			PosterInfo,
			FooterInfo,
			FileList,
			TopicNameBtn
		},
		mixins: [MescrollMixin],
		data() {
			return {
				// 页面高度
				wHeight: 600,
				// 搜索关键词
				form: {
					keyword: '',
					topicId: ''
				},
				downOptions: {
					use: false,
				},
				// 上拉加载的配置参数
				upOptions: {
					use: true,
					// 不自动加载
					auto: false,
					// 列表已无数据,列表的总数量要大于4才显示无更多数据
					noMoreSize: 4,
					// 空数据提示
					empty: {
						tip: '~ 空空如也 ~',
						btnText: '去看看'
					},
					toTop: {
						src: ''
					}
				},
				// 当前页
				currentPage: 1,
				// 分页大小
				pageSize: 12,
				// 数据
				dataList: [],
				// 没有更多了
				noMore: false,
				// 数据加载中
				loading: false,

			}
		},
		created() {
			// 获取页面高度
			this.wHeight = uni.getSystemInfoSync().windowHeight -44
		},
		onLoad(val) {
			this.form.topicId = val.id
			this.form.keyword =  ''
			this.initData()
		},
		methods: {
			goback(){
				uni.navigateBack()
			},
			// 输入框变化
			async keyChange(v){
				await this.initData()
				if(v){
					this.getArticleList()
				}

			},
			// 播放视频
			videoPlayBack(url){
				this.$nextTick(()=>{
					this.$refs.play.initPlay(url)
				})
			},
			initData() {
				this.currentPage = 1
				this.pageSize = 12
				this.dataList = [],
				this.noMore = false,
				this.loading = false
			},
			// 视频播放
			videoPlayBack(url){
				this.$emit('video_play',url)
			},
			// 获取列表数据
			getArticleList() {
				if (this.loading || !this.form.keyword) {
					return
				}
				let form = {
						page: this.currentPage,
						size: this.pageSize,
						keyword: this.form.keyword,
						topic: this.form.topicId
				}
				this.loading = true
				this.$httpApi.baseArticleGet('open/article/search/topic', form).then(({data}) => {
					this.loading = false
					if (data.code == "000000") {
						this.dataList = data.data.records
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length, !this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			// 加载更多
			getMoreList() {
				if (this.loading || this.noMore || !this.form.keyword) {
					return
				}
				let form = {
						page: this.currentPage + 1,
						size: this.pageSize,
						keyword: this.form.keyword,
						topic: this.form.topicId
				}
				this.loading = true
				this.$httpApi.baseArticleGet('open/article/search/topic', form).then(({data}) => {
					this.loading = false
					if (data.code == "000000") {
						if (data.data.records && data.data.records.length > 0) {
							this.currentPage += 1
							this.dataList = [...this.dataList, ...data.data.records];
						}
						this.noMore = data.data.records.length < this.pageSize
						this.mescroll.endSuccess(data.data.records.length, !this.noMore);
					} else {
						this.mescroll.endErr()
						this.$refs.uToast.show({
							type: 'error',
							icon: false,
							message: data.mesg
						})
					}
				}).catch(err => {
					this.mescroll.endErr()
					this.loading = false
				})
			},
			/**
			 * 上拉加载的回调
			 */
			upBack(page) {
				if (!this.loading && !this.noMore && this.form.keyword) {
					this.getMoreList()
				}else{
					this.mescroll.endErr()
				}
			},
			// 前往详情
			gotoArticle(id) {
				uni.navigateTo({
					url: '/pages/article/article?id=' + id
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-input {
		padding: 2px 7px !important;
	}
	.topic_box{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 8px;
		margin-bottom: 5px;
	}
</style>
